<template>
	<view>
		<view v-if="currentDevice == 'pc'" class="content flex items-center justify-center"
			style="width: 100%;height: 100%;padding: 50px;">
			<transition name="zoom">
				<view class="flex" v-show="miniDialogShow" style="width: 200px;height: 320px;
					background: url(~@../static/szrbj.png) center center / 100% 100% no-repeat;
					position: fixed;">
					<view class="" style="position: relative;">


						<view class="flex items-end justify-center w-full"
							style="color:#FFF;font-size: 14px;position: absolute;bottom: 22px;z-index: 99999999;">
							<view class="flex items-center justify-center" @click="(miniDialogShow = false)"
								style='background:url(~@../static/bg1.png) center center / 100% 100% no-repeat;width:95px;height:52px;cursor:pointer'>
								<image style="width: 18px;height: 18px;margin-right:5px" src="" mode=""></image>
								<span>语音</span>
							</view>
							<view class="flex items-center justify-center"
								@click="(miniDialogShow = false,textDialogShow = true)"
								style='background:url(~@../static/bg2.png) center center / 100% 100% no-repeat;width:95px;height:52px;cursor:pointer'>
								<image style="width: 18px;height: 18px;margin-right:5px" src="" mode=""></image>
								<span>聊天</span>
							</view>
						</view>
					</view>
				</view>
			</transition>

			<transition name="fade">
				<!-- 问答 -->
				<view class="flex-col" style="width: 460px;height: 800px;border-radius: 20px;overflow: hidden;">
					<view class="w-full h-full flex-col" v-show="textDialogShow == true && miniDialogShow == false"
						style="padding: 16px 16px 32px 16px;background:
						url(~@../static/textconversion.png) center center / 120% 120% no-repeat">
						<view class="flex items-center">
							<image style="width: 36px;height: 36px;margin-right: 8px;" src="../static/avatar.png"
								mode="">
							</image>
							<view class="flex-col">
								<text style="font-size: 14px;font-weight: bold;color: #212121;">高小博</text>
								<text style="font-weight: 400;font-size: 12px;color: #535363;">高博会数字服务官</text>
							</view>
						</view>

						<view class="hsc" style="margin-top: 42px;overflow-y: auto;padding-bottom: 20px;">
							<conversation :DeviceType='currentDevice' />
						</view>

						<view class="">
							<sendinput :DeviceType='currentDevice'></sendinput>
						</view>
					</view>
					<!-- 语音 -->
					<view class="w-full h-full flex-col" v-if="textDialogShow == false && miniDialogShow == false"
						style="background: url(~@../static/voicebg.png) center center / 100% 100% no-repeat;position: relative;">
						<view class="flex-col" style="color: #FFF;font-weight: bold;line-height: 20px;">
							<view class="w-full flex-col" style="padding: 16px 30px;">
								<text style="font-size: 14px;">高小博</text>
								<text style="font-size: 12px;font-weight: 400;">高博会数字服务官</text>
							</view>
						</view>
						<view class="w-full h-full flex items-center" style="position: absolute;inset: 0;">
							<view class="voiceSZR" style="width: 400px;height: 820px; z-index: 999999;margin: 0 auto;">
								<view class="shuziren-page"></view>
								<view class="szg-szr-box"></view>
							</view>
						</view>
						<view class="flex-col" style="margin-top: auto;z-index: 999999999999999;">
							<view class="flex items-center" style="margin: 0 auto 14px; ">
								<image style='width:40px;height:40px;cursor:pointer' src="../static/voice.png" mode="">
								</image>
								<view class=""
									style="background: rgba(0,0,0,0.2);border-radius: 14px;padding: 6px 14px;margin: 0 12px;">
									<text
										style="font-weight: 400;font-size: 12px;color: #FFFFFF;line-height: 17px;">我一直在听，您可以随时开始讲话</text>
								</view>
								<image style='width:40px;height:40px;cursor:pointer' src="../static/end.png" mode="">
								</image>
							</view>
							<view class="w-full"
								style="background: #FFF;height: 540px;border-radius: 20px;margin-top: auto;padding: 12px 16px 32px;">
								<view class="flex-col h-full">
									<view class="flex">
										<image style="width: 36px;height: 36px;margin-right: 8px;min-width: 36px;"
											src="../static/avatar.png" mode="">
										</image>
										<view class="w-full flex-col">
											<text
												style="font-weight: 400;font-size: 12px;color: #666666;line-height: 17px;">高小博</text>
											<view class="flex-col"
												style="margin-top: 3px;background: url(~@../static/recommand.png) center center /100% 100% no-repeat;width: 300px;height: 214px;padding: 12px 16px;">
												<view
													style="margin-bottom: 12px;font-weight: 500;font-size: 14px;color: #212121;line-height: 20px;padding-bottom: 12px;border-bottom: 1px solid #D8E9FF;">
													您可以试着问我：</view>

												<view class="w-full flex-col" style="">
													<view class="flex items-center  w-full"
														:style="{marginBottom:index+1 == 4 ? '' : '14px'}" style=""
														v-for="item,index in 4">
														<image style="width: 18px;height: 18px;" src="../static/q.png"
															mode="">
														</image>
														<text
															style="margin: 0 8px;font-weight: 400;font-size: 14px;color: #212121;line-height: 20px;">高博会有哪些特色亮点</text>
														<image style="width: 14px;height: 14px;margin-left: auto;"
															src="../static/fastsend.png" mode="">
														</image>
													</view>
												</view>

												<view class="flex items-center"
													style="margin-top: 10px;margin-left: auto;cursor: pointer;">
													<image style="width: 14px;height: 14px;margin-right: 4px;"
														src="../static/refresh.png" mode="">
													</image>
													<text
														style="font-weight: 400;font-size: 12px;color: #1E43E9;line-height: 17px;">换一批</text>
												</view>
											</view>
										</view>
									</view>
									<view class="flex items-center w-full" style="position: relative;margin-top: auto;">
										<input class="w-full"
											style="background: #FFFFFF;border-radius: 22px 22px 22px 22px;border: 1px solid #ECEFF3;font-size: 14px;padding: 12px 40px 12px 20px;height: 44px;"
											type="text" placeholder="很高兴为您服务,请描述您的问题" />
										<!-- <image style="width: 20px;cursor:pointer;height: 20px;position: absolute;right: 15px;"
									src="../static/send.png" mode=""></image> -->

										<view class="sendicon"
											style="position: absolute;right: 15px;width: 20px;cursor:pointer;height: 20px;">
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</transition>
		</view>

		<!-- 广告机 -->
		<view class="w-full h-full flex items-center"
			style="background: url(~@../static/voicebg.png) center center / 100% 100% no-repeat;padding-bottom: 100px;"
			v-if="currentDevice == 'Advertisingmachine'">
			<view class="w-full h-full flex items-center" style="position: absolute;inset: 0;">
				<view class="w-full flex items-center" style="height: 90vh;">
					<view class="advermachineSZR w-full h-full" style="z-index: 999999;margin: 0 auto;">
						<view class="shuziren-page"></view>
						<view class="szg-szr-box"></view>
					</view>
				</view>

				<view v-if="1>2" class="flex-col w-full "
					style="height:80vh;z-index: 9999999999999999;position: absolute;inset: 0;justify-content: center;padding:0 40px">
					<view class=""
						style="cursor:pointer;margin-left: auto;color:#FFF;padding: 18px 40px;align-self: baseline;background: url(~@../static/wxitem.png) center center / 100% 100% no-repeat;">
						<text>如何报名</text>
					</view>
					<view class=""
						style="cursor:pointer;margin-right: auto;color:#FFF;padding: 18px 40px;align-self: baseline;background: url(~@../static/wxitem.png) center center / 100% 100% no-repeat;">
						<text>查询展位号</text>
					</view>
					<view class=""
						style="cursor:pointer;margin-left: auto;color:#FFF;padding: 18px 40px;align-self: baseline;background: url(~@../static/wxitem.png) center center / 100% 100% no-repeat;">
						<text>高博会有哪些特色亮点</text>
					</view>
					<view class=""
						style="cursor:pointer;margin-right: auto;color:#FFF;padding: 18px 40px;align-self: baseline;background: url(~@../static/wxitem.png) center center / 100% 100% no-repeat;">
						<text>论坛活动日程</text>
					</view>
					<view class=""
						style="cursor:pointer;margin-left: auto;color:#FFF;padding: 18px 40px;align-self: baseline;background: url(~@../static/wxitem.png) center center / 100% 100% no-repeat;">
						<text>查看展位图</text>
					</view>
				</view>

				<view class="w-full" style="position: absolute;z-index: 999999999;padding:0 20px">
					<conversation></conversation>
				</view>
			</view>

			<view class="w-full" style="z-index: 9999999999999999;margin-top: auto;">
				<sendinput></sendinput>
			</view>
		</view>
		<!-- wx -->
		<view class="w-full h-full flex-col" v-if="currentDevice == 'wx'"
			style="background: url(~@../static/szrbj.png) center center / 100% 100% no-repeat;padding-bottom: 100px;">
			<view class="w-full h-full flex items-center" style="position: absolute;inset: 0;">
				<view class="w-full flex items-center" style="height: 90vh;">
					<view class="advermachineSZR w-full h-full" style="z-index: 999999;margin: 0 auto;">
						<view class="shuziren-page"></view>
						<view class="szg-szr-box"></view>
					</view>
				</view>






			</view>
			<view class="w-full" style="z-index: 999999999;padding:0 20px;margin-top: auto;margin-bottom: 30px;">
				<conversation :DeviceType='currentDevice'></conversation>
			</view>
			<view class="" style="z-index: 9999999999999999;padding: 0 30px;">
				<view class="flex items-center" style="margin-bottom: 20px;">
					<!-- <view class=""
						style="background: rgba(0,0,0,0.5);border-radius: 36px;border: 1px solid #FFFFFF;opacity: 0.85;padding: 8px 10px;margin-right: 16px;">
						<text style="font-weight: 400;
		font-size: 14px;
		color: #FFFFFF;">高博会有哪些特色亮点</text>
					</view>

					<view class=""
						style="background: rgba(0,0,0,0.5);border-radius: 36px;border: 1px solid #FFFFFF;opacity: 0.85;padding: 8px 10px;margin-right: 16px;">
						<text style="font-weight: 400;
		                font-size: 14px;
		                color: #FFFFFF;">如何报名</text>
					</view> -->
				</view>
				<view class="w-full">
					<sendinput></sendinput>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import conversation from './conversation.vue'
	import sendinput from './sendinput.vue'
	export default {
		name: "a",
		components: {
			conversation,
			sendinput,
		},
		props: {
			currentDevice: {
				type: String
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style>

</style>